<template>

  <div>
    <el-card class="box-card" :visible.sync="addDialogVisible">
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <el-breadcrumb-item :to="{ path:'/welcome/mailService' }">邮件管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>邮件列表</el-breadcrumb-item>
      </el-breadcrumb>
      <template>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="邮寄类型主题">
            <el-select v-model="params.mailType" clearable placeholder="请选择邮件类型">
              <el-option v-for="mailType in mailTypeList" :key="mailType.id" :value="mailType.id"
                         :label="mailType.typeName"/>
            </el-select>
          </el-form-item>
          <el-form-item label="按日期>=">
            <el-input placeholder="请输入日期" v-model="params.mailStartData" class="size"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click=" search(0)">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!--审核-->
      <div>
        <el-dialog
          title="审核"
          :close-on-click-modal="false"
          :visible.sync="audit"
          :show-close="true" width="850px">
          <el-form :model="mail"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="furniture"
                   :rules="rules"
          >
            <div style="align-content: center">
              <template>
                <el-radio-group v-model="mail.mailStatic" v-for="statics in staticList">
                  <el-radio :label="statics.staticId">{{statics.staticName}}</el-radio>
                </el-radio-group>
              </template>
            </div>
            <el-form-item>
              <el-button type="primary" @click="updateAudit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!--      添加-->
      <div>
        <el-dialog
          title="邮件下单"
          :close-on-click-modal="false"
          :visible.sync="addDialogVisible"
          :show-close="true" width="850px">
          <el-form :model="mail"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="mail"
                   :rules="rules"
          >
            <div style="align-content: center">
              <div><h3 style="margin-left: 270px;">请填写你要寄件的服务内容</h3></div>
              <el-form-item label="邮件类型" prop="mailType">
                <el-select v-model="mail.mailType" placeholder="请选择邮件类型">
                  <el-option v-for="mailType in mailTypeList" :key="mailType.id" :value="mailType.id"
                             :label="mailType.typeName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="邮件数量" prop="mailPrice">
                <el-input v-model="mail.mailPrice" placeholder="请选择邮件数量">
                </el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="linkmanContacts">
                <el-input v-model="mail.linkmanContacts" placeholder="请选择联系人">
                </el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="mailPhone">
                <el-input v-model="mail.mailPhone" placeholder="请选择联系电话" maxlength="11">
                </el-input>
              </el-form-item>
              <el-form-item label="寄件物品描述" prop="mailDescriptionName">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请选择寄件物品描述"
                  v-model="mail.mailDescriptionName">
                </el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('mail')">立即下单</el-button>
              <el-button @click="resetForm('mail')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!--      修改-->
      <div>
        <el-dialog
          title="邮件修改"
          :close-on-click-modal="false"
          :visible.sync="editDialogVisible"
          :show-close="true" width="850px">
          <el-form :model="mail"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="mail"
                   :rules="rules"
          >
            <div style="align-content: center">
              <div><h3 style="margin-left: 270px;">请填写你要寄件的服务内容</h3></div>
              <el-form-item label="邮件类型" prop="mailType">
                <el-select v-model="mail.mailType" placeholder="请选择邮件类型">
                  <el-option v-for="mailType in mailTypeList" :key="mailType.id" :value="mailType.id"
                             :label="mailType.typeName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="邮件数量" prop="mailPrice">
                <el-input v-model="mail.mailPrice" placeholder="请选择邮件数量">
                </el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="linkmanContacts">
                <el-input v-model="mail.linkmanContacts" placeholder="请选择联系人">
                </el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="mailPhone">
                <el-input v-model="mail.mailPhone" placeholder="请选择联系电话" maxlength="11">
                </el-input>
              </el-form-item>
              <el-form-item label="寄件物品描述" prop="mailDescriptionName">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请选择寄件物品描述"
                  v-model="mail.mailDescriptionName">
                </el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="updateSubmitForm('mail')">立即修改</el-button>
              <el-button @click="resetForm('mail')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div><span style="font-size:14px">状态：</span>
        <el-tag color="black" style="color: honeydew">未回复</el-tag>
        <el-tag color="green" style="color: honeydew">已回复</el-tag>
        <el-tag color="#124125" style="color: honeydew">已取消</el-tag>
        <el-tag color="#CA814D" style="color: honeydew">已作废</el-tag>
        <el-tag color="#747474" style="color: honeydew">未审批</el-tag>
        <el-tag color="#00CED1" style="color: honeydew">部级通过</el-tag>
        <el-tag color="#8B4500" style="color: honeydew">部级未通过</el-tag>
        <el-tag color="#0000FF" style="color: honeydew">局级通过</el-tag>
        <el-tag color="red" style="color: honeydew">局级未通过</el-tag>
        <el-button style="float: right" type="primary" @click="search(1)" icon="el-icon-message"
                   circle></el-button>
      </div>
      <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="mailDescriptionName" label="邮件物品描述"></el-table-column>
        <el-table-column prop='mailType' label="邮寄类型">
          <template slot-scope="scope">
            <span v-for="mailTypeList in mailTypeList" v-if="mailTypeList.id==scope.row.mailType">{{mailTypeList.typeName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mailPrice" label="邮寄数量"></el-table-column>
        <el-table-column prop="mailPersonnelId" label="经办人">
          <template slot-scope="scope">
            <span v-for="sysUser in sysUserList"
                  v-if="sysUser.usrId==scope.row.mailPersonnelId">{{sysUser.usrName}}</span>
          </template>
        </el-table-column>
        <el-table-column v-model="departmentName" prop="departmentName" label="归属部门">
          <template slot-scope="scope">
            <span v-for="sysUser in sysUserList"
                  v-if="sysUser.usrId==scope.row.mailPersonnelId">
              <span v-for="department in departmentList" v-if="sysUser.depId==department.id">
                {{department.departmentName}}</span>
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="mailStartData" label="发起时间">
          <template slot-scope="scope">
            <span>{{scope.row.mailStartData}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mailSuperior" label="处理人"></el-table-column>
        <!--        <el-table-column v-if="meetingStatusId==1" prop="meetingStatusId" label="会议状态" >未回复</el-table-column>-->
        <el-table-column prop="mailStatic" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.mailStatic == 14" style="color:green">已回复</span>
            <span v-if="scope.row.mailStatic ==15" style="color:black">未回复</span>
            <span v-if="scope.row.mailStatic == 16" style="color:#CA814D">已取消</span>
            <span v-if="scope.row.mailStatic == 17" style="color:#747474">已作废</span>
            <span v-if="scope.row.mailStatic == 18" style="color:#00CED1">未审批</span>
            <span v-if="scope.row.mailStatic == 19" style="color:#8B4500"> 部级通过</span>
            <span v-if="scope.row.mailStatic == 20" style="color:red">部级未通过</span>
            <span v-if="scope.row.mailStatic == 21" style="color:black">局级通过</span>
            <span v-if="scope.row.mailStatic == 22" style="color:red">局级未通过</span>
            <!--            //这里使用===还是==得看返回值是什么类型的，需不需要转换啥的，自己尝试一下就可以了，这样直接写也是行的，不过推荐最好使用===-->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover">
              <el-button type="info" plain>查看邮件</el-button>
              <el-button type="info" plain @click="showAddDialog"> 邮件下单</el-button>
              <!--            <router-link to="/welcome/conferenceRoom/addConferenceRoom">会议安排</router-link>-->
              <el-button type="info" plain @click="showUpdateDialog(scope.row)">修改邮件</el-button>
              <el-button type="info" plain @click="cancellation(scope.row)">取消邮件</el-button>
              <el-button v-if=" scope.row.mailStatic==null || scope.row.mailStatic==''  " type="info" plain
                         @click="auditUpdate(scope.row)">
                审核
              </el-button>
              <el-button slot="reference">管理</el-button>
            </el-popover>
          </template>
        </el-table-column>

      </el-table>
      <template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="params.total"
        >
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>
<script>

  export default {
    'data' () {
      return {
        tableData: [],//列表信息
        mailTypeList: [],//邮寄类型
        sysUserList: [],//用户信息
        departmentList: [],//部门信息
        staticList: [],//状态列表

        params: {
          pageSize: 5, // 每页显示5条记录
          pageIndex: 1, // 当前第几页
          total: 0, // 共几条记录去分页
          mailType: '',//通过邮件类型查询
          mailStartData: '',//通过会议室查询
        },
        departmentName: '',//归属部门
        mail: {//邮件服务
          linkmanContacts: '',//联系人
          mailId: '',//id
          mailDescriptionName: '',//邮件物品描述
          mailType: '',//邮寄类型
          mailPrice: '',//邮寄数量
          mailPersonnelId: '',//经办人Id
          mailStartData: '',//发起时间
          mailSuperior: '',//处理人：部门表里的上级
          mailStatic: '',//态Id:连接状态表的Id
          mailPhone: '',//联系电话
          courierNumber: '',//快递单号
        },
        addDialogVisible: false,
        editDialogVisible: false,
        audit: false,
        formLabelWidth: '120px',
        //校验
        rules: {
          mailDescriptionName: [
            {
              required: true,
              message: '请输入邮件物品描述',
              trigger: 'blur'
            }
          ],
          linkmanContacts: [
            {
              required: true,
              message: '请输入联系人',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 4,
              message: '长度在 2 到 4 个字符',
              trigger: 'blur'
            }
          ],
          mailPrice: [
            {
              required: true,
              message: '请输入邮寄数量',
              trigger: 'blur'
            }, {
              pattern: /^[^\u4e00-\u9fa5]+$/,
              message: '不允许输入中文',
              trigger: 'blur'
            }
          ],
          mailPhone: [
            {
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              pattern: /^1[34578]\d{9}$/,    //正则校验不用字符串
              message: '请填写正确的手机号码',
              trigger: 'blur'
            }
          ],
          mailType: [{
            required: true,
            message: '请选择邮件类型',
            trigger: 'change',
          }],
        }
      }
    }
    ,
    // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    'mounted' () {
      this.search()
    }
    ,
    methods: {
      'handleSizeChange' (val) {
        console.log(`每页 ${val} 条`)
        this.params.pageSize = val
        this.search()
      }
      ,
      'handleCurrentChange' (val) {
        console.log(`当前页: ${val}`)
        this.params.pageIndex = val
        this.search()
      }
      ,
      async 'search' (count) {
        console.log(this.params.mailType)
        // console.log(this.getProjectNum() + Math.floor(Math.random() * 1000000000000000))
        const url = '/vueboot/mail/list'
        const { data: res } = await this.$ajax.get(url, {
          params: {
            pageIndex: this.params.pageIndex,
            limit: this.params.pageSize,
            mailType: this.params.mailType,
            mailStartData: this.params.mailStartData,
            mailStatic: count,
          },
        })
        console.log(res)
        this.tableData = res.mailIPage.records
        this.params.total = res.mailIPage.total
        this.mailTypeList = res.mailTypeList
        this.sysUserList = res.sysUserList
        this.departmentList = res.departmentList
        this.staticList = res.staticList
      }
      ,
      'showAddDialog' () {
        this.mail.mailDescriptionName = ''//描述
        this.mail.mailPrice = ''//数量
        this.mail.linkmanContacts = ''//联系人
        this.mail.mailPhone = ''//联系电话
        this.mail.mailType = ''//邮件类型
        this.addDialogVisible = true
      }
      ,
      async 'submitForm' (mail) {
        this.$refs['mail'].validate((valid) => {
          if (valid) {
            this.mail.mailPersonnelId = sessionStorage.getItem('userid')//经办人id
            this.mail.courierNumber = this.getProjectNum() + Math.floor(Math.random() * 1000000000000000)//订单号
            const url = '/vueboot/mail/seva'
            this.$ajax.post(url, this.mail).then(res => {
              if (res.data == '1') {
                this.search()
                this.$message({
                  type: 'success',
                  message: '下单成功'
                })
                this.addDialogVisible = false
              } else {
                this.$message.error = '下单失败'
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })

      }
      ,
      'resetForm' () {//清空
        if (this.$refs['mail'] !== undefined) {
          this.$refs['mail'].resetFields()
        }
      }
      ,
      'filterTime' (time) {
        var date = new Date(time)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = date.getDate()
        d = d < 10 ? '0' + d : d
        var h = date.getHours()
        h = h < 10 ? '0' + h : h
        var minute = date.getMinutes()
        minute = minute < 10 ? '0' + minute : minute
        var s = date.getSeconds()
        s = s < 10 ? '0' + s : s
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
      }
      ,
      'showUpdateDialog' (row) {
        // this.$set(this.conferenceRoot, 'meetingTime', row.meetingTime)
        this.editDialogVisible = true
        this.mail.mailId = row.mailId//邮件ID
        this.mail.mailDescriptionName = row.mailDescriptionName//描述
        this.mail.mailPrice = row.mailPrice//数量
        this.mail.linkmanContacts = row.linkmanContacts//联系人
        this.mail.mailPhone = row.mailPhone//联系电话
        this.mail.mailPersonnelId = row.mailPersonnelId//经办人Id
        this.mail.mailStartData = row.mailStartData//发起时间
        this.mail.mailSuperior = row.mailSuperior//处理人
        this.mail.mailStatic = row.mailStatic//状态Id
        this.mail.courierNumber = row.courierNumber//快递单号
        this.mail.mailType = row.mailType//邮件类型

      }
      ,
      // 获取当前日期的方法
      'getProjectNum' () {
        const projectTime = new Date() // 当前中国标准时间
        const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
        const Month = projectTime.getMonth() + 1 // 获取中国区月份
        const Day = projectTime.getDate() // 获取几号
        var CurrentDate = Year
        if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
          CurrentDate += Month
        } else {
          CurrentDate += '0' + Month
        }
        if (Day >= 10) {
          CurrentDate += Day
        } else {
          CurrentDate += '0' + Day
        }
        return CurrentDate
      },
      async 'updateSubmitForm' (mail) {
        this.$refs['mail'].validate((valid) => {
          if (valid) {
            this.mail.mailPersonnelId = sessionStorage.getItem('userid')//经办人id
            this.mail.courierNumber = this.getProjectNum() + Math.floor(Math.random() * 1000000000000000)//订单号
            const url = '/vueboot/mail/seva'
            this.$ajax.post(url, this.mail).then(res => {
              if (res.data == '1') {
                this.search()
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.editDialogVisible = false
              } else {
                this.$message.error = '修改失败'
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async 'cancellation' (row) {
        console.log(row.mailId)
        this.$confirm('确定取消邮件吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const url = '/vueboot/mail/delMail'
          this.$ajax.get(url, {
            params: {
              mailId: row.mailId,
              isDel: 1
            }
          }).then(res => {
            console.log(res.data + '==============')
            if (res.data == '1') {
              this.$message({
                type: 'success',
                message: '取消成功'
              })
              this.search()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      auditUpdate (row) {
        this.mail.mailId = row.mailId//办公家具申领id
        this.audit = true
      },
      async updateAudit () {
        const url = '/vueboot/mail/audit'
        this.$ajax.get(url, {
          params: {
            mailStatic: this.mail.mailStatic,
            mailId: this.mail.mailId
          }
        }).then(res => {
          if (res.data == '1') {
            this.search()
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.audit = false
          } else {
            this.$message.error = '审核失败'
            this.search()
            this.$message({
              type: 'error',
              message: '审核失败'
            })
            this.audit = false
          }
        })
      },
    }
  }
</script>
<style>
  .size {
    width: 222px;
  }

  #add {
    position: relative;
    right: 0px;
  }

</style>
